import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_study_app/module/statistics/widget/statistics_chart.dart';

class BranchStatisticsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _BranchStatisticsState();
}

class _BranchStatisticsState extends State<BranchStatisticsPage> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(
            width: double.infinity,
            height: 12.w,
            color: Color(0xfff7f7f7),
          ),
          Container(
            color: Colors.white,
            padding: EdgeInsets.all(10.w),
            child: Row(
              children: [
                Container(
                  width: 3.w,
                  height: 15.w,
                  decoration: BoxDecoration(
                      color: Color(0xff009669),
                      borderRadius: BorderRadius.all(Radius.circular(1.w))),
                ),
                SizedBox(
                  width: 5.w,
                ),
                Text(
                  '本月走访、商机与放款统计',
                  style: TextStyle(
                      color: Color(0xff333333),
                      fontSize: 14.sp,
                      fontWeight: FontWeight.bold),
                ),
                Spacer(),
                InkWell(
                  onTap: () {},
                  child: Row(
                    children: [
                      Text(
                        '全部业务线',
                        style: TextStyle(
                            color: Color(0xff333333),
                            fontSize: 13.sp,
                            fontWeight: FontWeight.w300),
                      ),
                      SizedBox(
                        width: 2.w,
                      ),
                      Image.asset(
                        'assets/images/ic_arrow_down.png',
                        width: 15.w,
                        height: 15.w,
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
          Container(
            width: double.infinity,
            height: 1.w,
            margin: EdgeInsets.only(left: 12.w, right: 12.w),
            color: Color(0xfff0f0f0),
          ),
          Container(
            color: Colors.white,
            padding: EdgeInsets.symmetric(vertical: 10.w),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(left: 12.w),
                    child: Text(
                      '分行名称',
                      style:
                          TextStyle(color: Color(0xff333333), fontSize: 12.sp),
                      textAlign: TextAlign.left,
                    ),
                  ),
                ),
                Expanded(
                  child: Text(
                    '走访户数',
                    style: TextStyle(color: Color(0xff333333), fontSize: 12.sp),
                    textAlign: TextAlign.center,
                  ),
                ),
                Expanded(
                  child: Container(
                    width: double.infinity,
                    alignment: Alignment.center,
                    child: InkWell(
                      onTap: () {},
                      child: Row(
                        children: [
                          Spacer(),
                          Text(
                            '商机获得',
                            style: TextStyle(
                                color: Color(0xff333333), fontSize: 12.sp),
                            textAlign: TextAlign.center,
                          ),
                          Image.asset(
                            'assets/images/ic_sort_01.png',
                            width: 12.w,
                            height: 12.w,
                          ),
                          Spacer(),
                        ],
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    width: double.infinity,
                    alignment: Alignment.center,
                    child: InkWell(
                      onTap: () {},
                      child: Row(
                        children: [
                          Spacer(),
                          Text(
                            '商机成功',
                            style: TextStyle(
                                color: Color(0xff009669), fontSize: 12.sp),
                          ),
                          Image.asset(
                            'assets/images/ic_sort_02.png',
                            width: 12.w,
                            height: 12.w,
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    width: double.infinity,
                    alignment: Alignment.centerRight,
                    padding: EdgeInsets.only(right: 12.w),
                    child: InkWell(
                      onTap: () {},
                      child: Row(
                        children: [
                          Spacer(),
                          Text(
                            '贷款',
                            style: TextStyle(
                                color: Color(0xff333333), fontSize: 12.sp),
                            textAlign: TextAlign.right,
                          ),
                          Image.asset(
                            'assets/images/ic_sort_01.png',
                            width: 12.w,
                            height: 12.w,
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 1.w,
            color: Color(0xFFF0F0F0),
          ),
          Container(
            height: 50.w,
            color: Colors.white,
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(left: 12.w),
                    child: Text(
                      '长沙市岳麓区 玉兰路分行',
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style:
                          TextStyle(fontSize: 12.sp, color: Color(0xFF333333)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    child: Text(
                      '4321',
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style:
                          TextStyle(fontSize: 12.sp, color: Color(0xFF333333)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    child: Text(
                      '124',
                      textAlign: TextAlign.center,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style:
                          TextStyle(fontSize: 12.sp, color: Color(0xFF333333)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    child: Text(
                      '43',
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style:
                          TextStyle(fontSize: 12.sp, color: Color(0xFF333333)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.centerRight,
                    padding: EdgeInsets.only(right: 12.w),
                    child: Text(
                      '¥12341',
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style:
                          TextStyle(fontSize: 12.sp, color: Color(0xFF333333)),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 1.w,
            color: Color(0xFFF0F0F0),
          ),
          Container(
            color: Color(0xFFF7F7F7),
            padding: EdgeInsets.symmetric(vertical: 10.w),
            child: Row(
              children: [
                Expanded(
                    child: Container(
                  padding: EdgeInsets.only(left: 12.w),
                  child: Text(
                    '业务线',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    '走访户数',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    '上门/电话',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    '商机获得',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    '放款笔数',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.centerRight,
                  padding: EdgeInsets.only(right: 12.w),
                  child: Text(
                    '贷款',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
              ],
            ),
          ),
          Container(
            height: 1.w,
            color: Color(0xFFF0F0F0),
          ),
          Container(
            height: 36.w,
            color: Color(0xFFF7F7F7),
            child: Row(
              children: [
                Expanded(
                    child: Container(
                  padding: EdgeInsets.only(left: 12.w),
                  child: Text(
                    '三农',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    '3424',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    '222/431',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    '23',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    '22',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.centerRight,
                  padding: EdgeInsets.only(right: 12.w),
                  child: Text(
                    '¥21331',
                    style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
                  ),
                )),
              ],
            ),
          ),
          Container(height: 12.w, color: Color(0xFFF0F0F0)),
          Container(
            color: Colors.white,
            padding: EdgeInsets.all(10.w),
            child: Row(
              children: [
                Container(
                  width: 3.w,
                  height: 15.w,
                  decoration: BoxDecoration(
                      color: Color(0xff009669),
                      borderRadius: BorderRadius.all(Radius.circular(1.w))),
                ),
                SizedBox(
                  width: 5.w,
                ),
                Text(
                  '近12个月新增放款变动趋势',
                  style: TextStyle(
                      color: Color(0xff333333),
                      fontSize: 14.sp,
                      fontWeight: FontWeight.bold),
                ),
                Spacer(),
                InkWell(
                  onTap: () {},
                  child: Row(
                    children: [
                      Text(
                        '个金业务线',
                        style: TextStyle(
                            color: Color(0xff333333), fontSize: 13.sp),
                      ),
                      SizedBox(
                        width: 2.w,
                      ),
                      Image.asset(
                        'assets/images/ic_arrow_down.png',
                        width: 15.w,
                        height: 15.w,
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
          Container(
            width: double.infinity,
            height: 1.w,
            margin: EdgeInsets.only(left: 12.w, right: 12.w),
            color: Color(0xfff0f0f0),
          ),
          Container(
            padding: EdgeInsets.only(top: 12.w),
            alignment: Alignment.center,
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  width: 8.w,
                  height: 8.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.w),
                    color: Color(0xFF09BD87),
                  ),
                ),
                SizedBox(
                  width: 5.w,
                ),
                Text(
                  '放款笔数',
                  style: TextStyle(color: Color(0xFF666666), fontSize: 12.sp),
                ),
                Container(
                  margin: EdgeInsets.only(left: 20.w),
                  width: 8.w,
                  height: 8.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.w),
                    color: Color(0xFFFFAD00),
                  ),
                ),
                SizedBox(
                  width: 5.w,
                ),
                Text(
                  '金额',
                  style: TextStyle(color: Color(0xFF666666), fontSize: 12.sp),
                ),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            width: double.infinity,
            constraints: BoxConstraints(
              minHeight: 200.w,
            ),
            child: CustomPaint(
              painter: StatisticsChart(),
            ),
          ),
        ],
      ),
    );
  }
}
